<template>
  <div class="card h-100">
    <div class="card-header pb-0 p-3">
      <div class="row">
        <div class="col-6 d-flex align-items-center">
          <h6 class="mb-0">可投标订单</h6>
        </div>
        <div class="col-lg-6 col-7">
          <el-button
            v-if="isType"
            type="success"
            plain
            style="float: right"
            @click="chooseOrder"
            >提交！</el-button
          >
        </div>
      </div>
    </div>
    <div class="card-body p-3 pb-0 mb-0">
      <ul class="list-group">
        <li
          class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg"
          v-for="(item, index) in form"
          :key="index"
        >
          <div class="d-flex flex-column">
            <h6 class="mb-1 text-dark font-weight-bold text-sm">
              {{ item.name }}
            </h6>
            <span class="text-xs">编号：{{ item.number }}</span>
          </div>
          <div class="d-flex align-items-center text-sm">
            {{ item.company }}
          </div>
          <vsud-button
            color="success"
            size="sm"
            variant="outline"
            @click="
              item.isBid = true;
              isType = true;
            "
            v-if="!item.isBid"
            >投标</vsud-button
          >
          <el-input
            style="width: 100px"
            placeholder="/万元"
            size="small"
            v-if="item.isBid"
            v-model="item.price"
          ></el-input>
        </li>
      </ul>
      <el-pagination layout="prev, pager, next" :total="50" />
    </div>
  </div>
</template>

<script>
import VsudButton from "@/components/VsudButton.vue";
import { ElMessage } from "element-plus";
// import { Action } from 'element-plus'
import { mapMutations } from "vuex";
export default {
  name: "TouBiao",
  components: {
    VsudButton,
  },
  data() {
    return {
      isBid: false,
      price: "",
      isType: false,
      form: [
        {
          name: "高级零件",
          number: "#RV-126749",
          company: "下单人：NEU",
          isBid: false,
          price: "",
        },
        {
          name: "中级零件",
          number: "#RV-126749",
          company: "下单人：NEU",
          isBid: false,
          price: "",
        },
        {
          name: "小型零件",
          number: "#FB-21256",
          company: "下单人：NEU",
          isBid: false,
          price: "",
        },
        {
          name: "航天零件",
          number: "#QW-103578",
          company: "下单人：NEU",
          isBid: false,
          price: "",
        },
        {
          name: "饮料",
          number: "#AR-803481",
          company: "下单人：NEU",
          isBid: false,
          price: "",
        },
        {
          name: "普通零件",
          number: "#QW-103578",
          company: "下单人：NEU",
          isBid: false,
          price: "",
        },
        {
          name: "零食",
          number: "#AR-803481",
          company: "下单人：NEU",
          isBid: false,
          price: "",
        },
      ],
    };
  },
  methods: {
    ...mapMutations(["openBid", "hideBid"]),
    chooseOrder() {
      this.hideBid();
      ElMessage({
        message: "投标成功～",
        type: "success",
      });
    },
  },
};
</script>
